<template>
  <div class="input-item">
    <el-form :model="deviceform" ref="deviceform" :rules="rules" label-width="250px">
        <div class="parameType-wrap">
            <div class="parameType">
              <div class="button">
                <!-- <span>基本参数配置</span> -->
                <el-button style="float: right; padding:4px 8px;" type="primary" @click="operationClick('deviceform')">确定</el-button>
              </div>
              <el-col :xs="24" :sm="24" :lg="24"> 
                <el-form-item label="设备状态上报周期：" prop="report_status_interval">
                  <el-input v-model.number="deviceform.report_status_interval"><span slot="append">秒</span></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="网口（管理口）名称：" prop="eth0_name">
                  <el-input v-model="deviceform.eth0_name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="安全存储机制：" prop="is_encrpt_db_key_field">
                  <el-switch v-model="deviceform.is_encrpt_db_key_field"  active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="日志分页默认显示条数：">
                  <!-- <el-input v-model="deviceform.page_length"><span slot="append">条</span></el-input> -->
                  <el-select v-model="deviceform.page_length" style="width:100%;">
                    <el-option label="10条/页" value=10></el-option>
                    <el-option label="20条/页" value=20></el-option>
                    <el-option label="30条/页" value=30></el-option>
                    <el-option label="40条/页" value=40></el-option>
                    <el-option label="50条/页" value=50></el-option>
                    <el-option label="100条/页" value=100></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="日志默认显示天数：" prop="default_log_days">
                  <el-input v-model.number="deviceform.default_log_days"><span slot="append">天</span></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="僵尸连接超时：" prop="mainrsa_connect_zombie_timeout">
                  <el-input v-model.number="deviceform.mainrsa_connect_zombie_timeout"><span slot="append">秒</span></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="文件操作日志检测间隔：" prop="check_file_opt_interval">
                  <el-input v-model.number="deviceform.check_file_opt_interval"><span slot="append">秒</span></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="授权中心定时更新参数间隔：" prop="check_net_status_interval">
                  <el-input v-model.number="deviceform.check_net_status_interval"><span slot="append">秒</span></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="每天指定时间自动重启设备:">
                  <el-select v-model="deviceform.reset_on_hours" style="width:100%;">
                    <el-option :value='0' label="不控制"></el-option>
                    <el-option v-for="item in 23" :key="item" :label="item + ':00'" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form-item label="进程自检喂狗周期：" prop="write_watch_dog_interval">
                  <el-input v-model.number="deviceform.write_watch_dog_interval"><span slot="append">秒</span></el-input>
                </el-form-item>
              </el-col>
              
              
              
            </div>
        </div>    
    </el-form>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import { validNum } from '@/utils/validate'
export default {
    data() {
        return {
            deviceform:{
              report_status_interval:'0',
              eth0_name:'',
              is_encrpt_db_key_field:'0',
              page_length:'0',
              default_log_days:'0',
              mainrsa_connect_zombie_timeout:'0',
              check_file_opt_interval:'0',
              check_net_status_interval:'0',
              write_watch_dog_interval:'0'
            },
            oldData:[],
            rules:{
              report_status_interval:[{required:true,validator:validNum,trigger:'blur'}],
              eth0_name:[{required:true,message:'请输入网口(管理口)吗名称',trigger:'blur'}],
              default_log_days:[{required:true,validator:validNum,trigger:'blur'}],
              mainrsa_connect_zombie_timeout:[{required:true,validator:validNum,trigger:'blur'}],
              check_file_opt_interval:[{required:true,validator:validNum,trigger:'blur'}],
              check_net_status_interval:[{required:true,validator:validNum,trigger:'blur'}],
              write_watch_dog_interval:[{required:true,validator:validNum,trigger:'blur'}],
                // port:[{required:true,validator:validMax,trigger:'blur'}]
            },
        }
    },
    created(){
      this.getData()
      // console.log();
      
    },
    methods:{
      // 
      async getData(){
        // const data = {}
        const res = await connrequest('GetParamThreshhold')
        // console.log(res.Data);
        this.oldData = res.Data;
        res.Data = res.Data.map(item => {
          for (const i in this.deviceform) {
            if (item.Name === i) {
              this.deviceform[i] = item.Value
            }
          }
          
        })
      },
      async operationClick(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.oldData = this.oldData.map(item => {
            for (const key in this.deviceform) {
              if(item.Name === key){
                if (typeof this.deviceform[key] != 'string') {
                  item.Value = JSON.stringify(this.deviceform[key])
                }else{
                  item.Value = this.deviceform[key]
                }
              }
              }
              return item
            })
            const data = {
              Data:this.oldData
            }
            const res = await connrequest('SetParamThreshhold',data)
            this.$message.success('修改成功')
            this.getData();
          }
        })
      }
    }
}
</script>

<style lang="scss" scoped>
/* @import url(); 引入css类 */
  .parameType-wrap{
    display:flex;
    flex-wrap: wrap;
  }
  ::v-deep.input-item{
    // margin-top: 10px;
    .parameType{
      border: 1px solid #eceff5;
      border-radius: 3px;
      width: 600px;
    //   padding: 10px;
      margin: 0px;
      box-shadow: 0 0 10px #eceff5;
      .button{
        
        border-bottom: 1px solid #eceff5;
        padding-bottom : 32px;
      }
    }
    .el-form-item{
      margin-bottom: 18px;
    }
    .el-input-group__append, .el-input-group__prepend{
      width: 60px;
      padding: 0;
      text-align: center;
    }
  }
  .button{
    margin-bottom: 20px;
  }
  ::v-deep.el-form-item{
    label{
      font-weight: 500;
    }
  }
  
</style>